<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 400px;
            height: 600px;
            margin: 0 auto;
            background: #ccc;
        }

        ul,
        li {
            list-style: none;
        }

        li {
            background: salmon;
        }

        input {
            width: 200px;
            height: 30px;
        }
    </style>
</head>

<body>
    <ul id="arrlist">

    </ul>
    <script>
        var arr = [{

            label: "用户名",

            name: "username",

            type: "text"

        }, {

            label: "密码",

            name: "password",

            type: "password"

        }, {

            label: "性别",

            name: "gender",

            type: "select",

            value: ['男', '女', '不男', '不女', 'Gay', '妖王']

        }, {

            label: "爱好",

            name: "hobby",

            type: "checkbox",

            value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

        }, {

            label: '是否已婚',

            name: 'married',

            type: 'radio',

            value: ['已婚', '未婚']

        },
        {

            label: '简介',

            name: 'resume',

            type: 'textarea'

        }];

        arr.forEach(function (item, index) {
            arrlist.innerHTML += '<li>' +
                '<p>' + item.label + item.name + '<input type ="' + item.type + '"' + 'value = "' + item.value + '"' + '>' + '</p>' +
                '</li>'
        })


    </script>
</body>

</html>